<template>
	<view class="Menu">
		<!-- 导航条 :style="{ height: $wanlshop.wanlsys().height + 'px' }"-->
		<view class="cu-custom">
			<view class="cu-bar fixed bg-bgcolor" :style="{height: $wanlshop.wanlsys().height + 'px',}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0" @tap="$wanlshop.back(1)"></text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					<!-- 转账 -->
					{{$t('otcTransfer.page.title')}}
				</view>
				<view class="action">
					<text class="wlIcon-gengduo"></text>
				</view>
			</view>
		</view>
		<view style="position: fixed;height: auto;  width: auto; top: 0; left: 0; bottom: 0; right: 0;"
			:style="{top: $wanlshop.wanlsys().height + 'px',}">
			<view class="transferBox">
				<view class="assets">
					<view class="assetsT">
						<view class="title">{{$t('otcTransfer.page.head.title')}}<!-- 资产 --></view>
						<view class="pick">{{type}}
						</view>
					</view>
					<view class="assetsM">
						<view class="assetsInput">
							<u--input border='none' v-model="Inputmoney"></u--input>
						</view>
						<view class="assetsmMoney">
							<!-- 余额 -->{{$t('otcTransfer.page.head.subtitle')}}:{{money||0}}
						</view>
					</view>
				</view>
			</view>
			<view class="uni-btn">
				<button class="uni-btn-v" @click="formSubmit1"> 确认 <!-- 确认 --></button>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="label" @close='close' @cancel='close' @confirm='confirm'
			:closeOnClickOverlay='true'></u-picker>
		<u-popup :show="show1" mode="bottom" @close="close" :closeable='false' :closeOnClickOverlay='true'>
			<view class="cont">
				<view class="title">转入协议</view>
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower()">
					<view class="xy" v-html="tz_content">
					</view>
				</scroll-view>
				<view class="btn-list" v-if="is_sign">
					<view v-if="isBottom" class="btn-complete" @click="formSubmit">{{$t('wanlAgree-tongyianniu')}}
					</view>
					<view v-if="!isBottom" class="btn-reset">{{$t('wanlAgree-tongyianniu')}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				money: '',
				Inputmoney: '0',
				show: false,
				show1: false,
				is_sign: true,
				isBottom: false,
				columns: [
					[
						// {
						// 	label: 'STOK',
						// 	id: 2
						// }, 
						{
							label: 'YLD',
							id: 3
						}, {
							label: '业绩',
							id: 4
						}
					]
				],
				type: 'YLD',
				id: '3',
				mobile: '',
				in_mobile: '',
				captcha: '',
				count: 60,
				counting: false,
				tz_content: ''
			};
		},
		onShow() {
			this.getMoney()
			this.getxtyldpay()
			this.mobile = uni.getStorageSync("wanlshop:user").mobile
			let payConfig = uni.getStorageSync("wanlshop:config")

		},
		methods: {
			getxtyldpay() {
				uni.request({
					url: "/index/getxtyldpay",
					data: {},
					success: (res) => {
						if (res.data.status == 1) {
							this.columns = [
								[
									// {
									// 	label: 'STOK',
									// 	id: 2
									// }, 
									{
										label: 'YLD',
										id: 3
									}, {
										label: this.$t('otc.category.performance'), //'业绩',
										id: 4
									},
									{
										label: this.$t('otc.category.points'), //'$',
										id: 100
									},
								]
							]
						}
					},
				});
			},
			//获取余额
			getMoney() {
				uni.request({
					url: "/user/getMoney",
					method: 'POST',
					data: {
						type: this.id,
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.money = res.res.data.money
						}
					},
				});
			},
			// 发送手机动态码
			handleCode() {
				if (this.counting) return;
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.mobile)) {
					uni.showToast({
						title: this.$t('otcTransfer.toast.auth.phone'),
						//"请输入正确的手机格式",
						icon: "none",
					});
					return;
				}
				this.getCaptcha();
			},
			// 获取验证码的接口
			getCaptcha() {
				uni.request({
					url: "/sms/send",
					method: "POST",
					data: {
						event: "mobilelogin",
						mobile: this.mobile,
					},
					success: (res) => {
						this.$wanlshop.msg(this.$t('otcTransfer.toast.getcode.success')); //"验证码发送成功"
						this.counting = true;
						const timer = setInterval(() => {
							this.count--;
							if (this.count <= 0) {
								clearInterval(timer);
								this.counting = false;
								this.count = 60; // 重置倒计时时长
							}
						}, 1000);
					},
				});
			},
			//转账
			formSubmit1() {
				this.show1 = true
				this.isBottom = true
				uni.request({
					url: "/user/yld_ap_yld",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.tz_content = res.res.data
						}
					},
				});
			},
			formSubmit() {
				this.show1 = false
				if (this.Inputmoney == '0') {
					uni.showToast({
						title: '请输入转让的金额',
						icon: "none",
					});
					return;
				}

				uni.request({
					url: "/user/suoyldMoney",
					method: 'POST',
					data: {
						yld: this.Inputmoney,
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.$wanlshop.msg(res.res.msg);
							this.Inputmoney = '0'
							this.getMoney()
						}
					},
				});
			},
			//选择
			confirm(val) {
				this.id = val.value[0].id.toString()
				this.type = val.value[0].label
				this.show = false
				this.getMoney()
			},
			//关闭选择
			close() {
				this.show = false
				this.show1 = false
			},
			scrolltolower() {
				this.isBottom = true
			},

		}
	};
</script>

<style lang="scss">
	.Menu {
		background: #f8f8f8;

		.transferBox {
			padding: 0 24rpx;

			.assets {
				padding: 38rpx 30rpx 34rpx 30rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 24rpx;

				.assetsT {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 48rpx;
					}

					.pick {
						background: #F3F3F3;
						border-radius: 4rpx;
						padding: 5rpx 6rpx 5rpx 6rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 48rpx;
						min-width: 112rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.assetsM {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.assetsInput {
						width: 50%;

						/deep/.u-input__content__field-wrapper__field {
							font-weight: 600;
							font-size: 52rpx !important;
							color: #FF443C !important;
							line-height: 48rpx !important;
						}
					}

					.assetsmMoney {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 48rpx;
					}
				}
			}

			.formList {
				h1 {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 48rpx;
					margin: 30rpx 0;
				}

				.list {
					background: #fff;
					border-radius: 16rpx;
					padding: 30rpx;
					position: relative;
				}

				/deep/.u-input__content {


					.u-input__content__field-wrapper__field {
						font-weight: 400;
						font-size: 28rpx !important;
						color: #333333 !important;
					}
				}

				.code {
					font-size: 28rpx;
					color: #fc5351;
					position: absolute;
					right: 30rpx;
					top: 32rpx;
				}

			}
		}

		.uni-btn-v {
			width: 702rpx;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
			position: fixed;
			left: 24rpx;
			bottom: 80rpx;
		}

		.cont {
			background: #fff;

			.title {
				text-align: center;
				font-size: 28rpx;
				color: #333;
				padding: 40rpx;
			}

			.xy {
				padding: 0 24rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: justified;

			}

			.scroll-y {
				height: 40vh;
			}

			.btn-list {
				width: 100%;
				height: 150rpx;

				display: flex;
				align-items: center;
				justify-content: space-around;

				.btn-reset {
					width: 100%;
					margin: 20rpx 20rpx 0;
					height: 96rpx;
					background: #f4f4f4;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-size: 30rpx;
					color: #3E3E3E;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn-complete {
					width: 100%;
					margin: 20rpx 20rpx 0;
					height: 96rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-size: 30rpx;
					color: #fff;
					background-color: #eb5641;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>